<template>
  <div>
    <el-card class="box-card">
      <el-form label-width="auto" size="mini">
        <el-row>
          <el-col :span="24">
            <el-form-item label="步骤1：">
              <i class="el-icon-download" />
              <span>
                <el-link class="font-12" type="primary" @click="download">
                  &nbsp;&nbsp;下载模板
                </el-link>
              </span>
            </el-form-item>
            <!-- <el-form-item label="步骤2：">
              <i class="el-icon-edit" />
              <span>&nbsp;&nbsp;填写导入数据</span>
            </el-form-item> -->
            <el-form-item label="步骤2：">

              <span>
                <el-link class="font-12" type="primary">
                  <el-upload
                    ref="upload"
                    :headers="headers"
                    class="upload-demo"
                    :action="action"
                    accept=".xlsx, .xls"
                    :on-change="handleChange"
                    :on-success="handleSuccess"
                    :on-error="handleError"
                    :auto-upload="false"
                  >
                    <i class="el-icon-thumb" /> &nbsp;&nbsp; 选择文件
                  </el-upload>
                </el-link>
              </span>
            </el-form-item>
            <el-form-item label="步骤3：">
              <i class="el-icon-position" />
              <span>
                <el-link class="font-12" type="primary" @click="upload">
                  &nbsp;&nbsp;执行导入
                </el-link>
              </span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { getToken } from '@neu/biz-core/utils/auth'
const downLoadErrorMsg = '模板配置错误,请联系管理员.....'
export default {
  props: {
    downloadFunct: Function, // eslint-disable-line
    uploadSuccess: Function, // eslint-disable-line
    uploadError:Function, // eslint-disable-line
    uploadFile: Function, // eslint-disable-line
    multiple: {
      required: false,
      type: Boolean,
      default: false
    },
    fileName: {
      required: false,
      type: String,
      default: '模板'
    },
    action: {
      required: true,
      type: String,
      default: ''
    }
  },
  data() {
    return {
      fileData: [],
      headers: {
        'Access-Control-Allow-Origin': '*',
        'Authentication': getToken()
      }
    }
  },
  methods: {
    // download template
    download() {
      if (!this.downloadFunct) {
        this.$message.error(downLoadErrorMsg)
        return false
      }
      this.downloadFunct().then(res => {
        const content = res
        const blob = new Blob([content])
        const fileName = this.fileName + '.xlsx'
        // not IE downLoad
        if ('download' in document.createElement('a')) {
          const elink = document.createElement('a')
          elink.download = fileName
          elink.style.display = 'none'
          elink.href = URL.createObjectURL(blob)
          document.body.appendChild(elink)
          elink.click()
          URL.revokeObjectURL(elink.href)
          document.body.removeChild(elink)
        } else {
          navigator.msSaveBlob(blob, fileName)
        }
      })
    },
    // upload components change
    handleChange(file, fileList) {
      if (file) {
        // 判断是否可以上传多个文件
        if (!this.multiple && fileList.length > 1) {
          fileList = fileList.splice(fileList.length - 1, 1)
          this.$message({
            showClose: true,
            message: '不能同时上传多个文件',
            type: 'error'
          })
          return false
        }

        // 判断是否为Excel
        if (!this.isExcel(file)) {
          fileList = fileList.splice(fileList.length - 1, 1)
          this.$message({
            showClose: true,
            message: '文件 ' + file.name + ' 格式不正确，请上传.xls,.xlsx文件。',
            type: 'error'
          })
          return false
        }
        const list = fileList.filter(ele => ele.name === file.name)
        if (list.length === 2) {
          fileList = fileList.splice(fileList.length - 1, 1)
          this.$message({
            showClose: true,
            message: '已经选择了这个文件。',
            type: 'error'
          })
          return false
        }

        this.fileData = fileList
      }
    },
    // upload file success
    handleSuccess(response, file, fileList) {
      if (response.status === 'failure') {
        this.$refs.upload.clearFiles()
        if (!this.uploadError) {
          this.$message({
            showClose: true,
            message: '文件上传失败',
            type: 'error'
          })
        } else {
          this.uploadError(response.data)
        }
      } else {
        if (!this.uploadSuccess) {
          this.$message({
            showClose: true,
            message: '文件上传成功',
            type: 'success'
          })
        } else {
          this.uploadSuccess(response.data)
        }
      }
    },
    // upload file failure
    handleError() {
      this.$message({
        showClose: true,
        message: '文件上传失败',
        type: 'error'
      })
    },
    // check file is excel
    isExcel(file) {
      return /\.(xlsx|xls)$/.test(file.name)
    },
    // upload files to server
    upload() {
      if (this.fileData.length <= 0) {
        this.$message({
          showClose: true,
          message: '请选择要上传的文件',
          type: 'error'
        })
        return false
      }

      this.$refs.upload.submit()
      if (this.uploadFile) {
        this.uploadFile()
      }
    }
  }
}
</script>
<style scoped>
.note_cs{
  margin: 5px;
  color: red;
}
</style>
